<breadcrumbs></breadcrumbs>

<div class="content-container">
    <form name="createUserForm" novalidate="novalidate">

        <label for="nickname"><message key="addAuthorizationPkgRule.userNickname.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('nickname')">
            <input
                    id="nickname"
                    type="text"
                    name="nickname"
                    autocomplete="off"
                    placeholder="erik"
                    ng-model="newUser.nickname"
                    ng-required="true"
                    ng-change="nicknameDidChange()"
                    ng-pattern="userNicknamePattern">
            <error-messages key-prefix="createUser.nickname" error="createUserForm.nickname.$error"></error-messages>
        </div>

        <label for="email"><message key="createUser.email.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('email')">
            <input
                    id="email"
                    type="text"
                    name="email"
                    valid-email=""
                    autocomplete="off"
                    ng-model="newUser.email">
            <error-messages key-prefix="createUser.email" error="createUserForm.email.$error"></error-messages>
            <div class="text-warning" ng-show="!newUser.email||!newUser.email.length">
                <small><message key="createUser.email.emptyNote"></message></small>
            </div>
        </div>

        <label for="password-clear"><message key="createUser.passwordClear.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('passwordClear')">
            <input
                    id="password-clear"
                    type="password"
                    name="passwordClear"
                    autocomplete="off"
                    ng-required="true"
                    ng-change="passwordsChanged()"
                    valid-password=""
                    ng-model="newUser.passwordClear">
            <error-messages key-prefix="createUser.passwordClear" error="createUserForm.passwordClear.$error"></error-messages>
        </div>

        <label for="password-clear-repeated"><message key="createUser.passwordClearRepeated.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('passwordClearRepeated')">
            <input
                    id="password-clear-repeated"
                    type="password"
                    name="passwordClearRepeated"
                    autocomplete="off"
                    ng-change="passwordsChanged()"
                    ng-required="true"
                    ng-model="newUser.passwordClearRepeated">
            <error-messages key-prefix="createUser.passwordClearRepeated" error="createUserForm.passwordClearRepeated.$error"></error-messages>
        </div>

        <label><message key="createUser.naturalLanguage.title"></message></label>
        <div class="form-control-group">
            <natural-language-chooser natural-language-code="newUser.naturalLanguageCode"></natural-language-chooser>
        </div>

        <label for="captcha-response-input"><message key="createUser.captchaResponse.title"></message></label>
        <div class="form-control-group" ng-class="deriveFormControlsContainerClasses('captchaResponse')">
            <img style="vertical-align:middle;" ng-src="{{captchaImageUrl}}">
            =
            <input
                    id="captcha-response-input"
                    size="3"
                    type="text"
                    autocomplete="off"
                    name="captchaResponse"
                    ng-required="true"
                    ng-change="captchaResponseDidChange()"
                    ng-model="newUser.captchaResponse">
            <error-messages key-prefix="createUser.captchaResponse" error="createUserForm.captchaResponse.$error"></error-messages>
        </div>

        <div class="form-action-container">
            <button
                    ng-disabled="createUserForm.$invalid"
                    ng-click="goCreateUser()"
                    type="submit"
                    class="main-action"><message key="createUser.action.title"></message></button>
        </div>

    </form>
</div>

<div class="footer"></div>
<spinner spin="shouldSpin()"></spinner>

